<template>
  <div class="article">
    <view class="head">
      <div class="returnBtn" @click="goBack">
        <image src="/static/images/stationInfo/icon_return@2x.png" alt="" mode="widthFix"></image>
      </div>
      <div class="article_title">{{ columnList.title }}</div>
    </view>

    <view class="articleDetail">
      <div class="detailContent">
        <u-parse :content="columnList.content"></u-parse>
        <!-- <div v-html="columnList.content"></div> -->
      </div>
    </view>
  </div>
</template>

<script>
import { getArticleListByColumnId, getArticleDetailById, getParperInfo } from "@/api/index"
import { baseUrl } from '../../config'
import config from '@/config.js'

export default {
  data() {
    return {
      baseUrl: '', // 基础URL
      tabId: '', // 存储选中的tab id
      columnList: {},
      columnId: '',
      total: 0,
      articleDetail: [],
      parperList: {
        exaParper: {},
        exaClassVoList: []
      },
      showTopBtn: false, // 控制返回顶部按钮的显示
    }
  },
  onLoad(options) {
    console.log('接收到的参数:', options);

    // 接收参数
    this.columnId = options.id;

    this.baseUrl = config.baseUrl

  },
  mounted() {
    this.baseUrl = config.baseUrl
    // 获取文章列表
    if (this.columnId) {
      this.getData();
    }

    const scrollEl = document.querySelector('.articleDetail');
    if (scrollEl) {
      scrollEl.addEventListener('scroll', this.handleScroll);
    }
  },
  beforeDestroy() {
    // 移除滚动监听
    const scrollEl = document.querySelector('.articleDetail');
    if (scrollEl) {
      scrollEl.removeEventListener('scroll', this.handleScroll);
    }
  },
  methods: {
    getData() {
      getArticleDetailById({ id: this.columnId }).then(res => {
        console.log(res);

        // 处理内容中的所有媒体路径
        if (res.content) {
          res.content = this.processMediaSrc(res.content);
        }

        this.columnList = res
        console.log('处理后的内容:', this.columnList.content);
      });
    },

    // 处理所有媒体资源的 src 路径
    processMediaSrc(content) {
      if (!content) return content;

      // 匹配所有包含 src 属性的标签
      return content.replace(/(<[^>]+src=["'])([^"']+)(["'][^>]*>)/gi, (match, prefix, src, suffix) => {
        // 移除 /dev-api 前缀
        const newSrc = src.replace(/^\/dev-api/, '');

        // 拼接 baseUrl
        return prefix + this.baseUrl + newSrc + suffix;
      });
    },

    goBack() {
      // 获取当前页面栈
      uni.navigateBack({
        delta: 1,
        fail: (err) => {
          console.error('返回失败:', err);
          // 如果返回失败，跳转到首页
          uni.switchTab({
            url: '/pages/index'
          });
        }
      });
    },

    handleScroll(e) {
      // 滚动超过 300px 显示按钮
      const scrollTop = e.target.scrollTop;
      this.showTopBtn = scrollTop > 400;
    },

    goTop() {
      const scrollEl = document.querySelector('.articleDetail');
      if (scrollEl) {
        scrollEl.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .custom-tab-bar-wrapper {
  display: none !important;
}

.article {
  width: 100vw;
  height: 100vh;
  background-color: #00063A;

  .head {
    width: 100vw;
    height: calc(100vw * 140 / 2560); // 高度按比例自适应
    background: url('@/static/images/index/bg_top2.png') no-repeat center center;
    background-size: cover;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 calc(100vw * 20 / 2560);

    .returnBtn {
      width: calc(100vw * 64 / 2560);
      height: calc(100vw * 64 / 2560);
      margin-right: calc(100vw * 30 / 2560);

      image {
        width: 100%;
        height: 100%;
      }
    }

    .article_title {
      font-size: calc(100vw * 40 / 2560);
      color: #FFFFFF;
      text-align: left;
    }
  }

  .articleDetail {
    width: calc(100vw * 2500 / 2560);
    height: calc(100vw * 1220 / 2560);
    margin: calc(100vw * 40 / 2560) calc(100vw * 30 / 2560);
    background: url('@/static/images/stationInfo/bg_articleList@2x.png');
    border-radius: calc(100vw * 24 / 2560);
    // padding: calc(100vw * 100 / 2560) calc(100vw * 140 / 2560);
    overflow: hidden;
    overflow-y: auto; // 改为 auto
    -webkit-overflow-scrolling: touch; // 添加弹性滚动

    .detailContent {
      color: #fff;
      width: 100%;
      min-height: 100%; // 添加最小高度
      padding: calc(100vw * 80 / 2560) calc(100vw * 260 / 2560) calc(100vw * 120 / 2560); // 增加底部内边距
      box-sizing: border-box;
      display: flex; // 添加弹性布局
      flex-direction: column; // 垂直方向
    }
  }
}


/* 添加所有字体大小的显示文本 */
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
  content: "10px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="40px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="40px"]::before {
  content: "40px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before {
  content: "48px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="60px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="60px"]::before {
  content: "60px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="84px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="84px"]::before {
  content: "84px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="100px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="100px"]::before {
  content: "100px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="120px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="120px"]::before {
  content: "120px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}

/* 添加字体大小样式类 */
/deep/.ql-size-10px {
  font-size: calc(100vw * 10 / 2560);
}

/deep/.ql-size-14px {
  font-size: calc(100vw * 14 / 2560);
}

/deep/.ql-size-18px {
  font-size: calc(100vw * 18 / 2560);
}

/deep/.ql-size-32px {
  font-size: calc(100vw * 32 / 2560);
}

/deep/.ql-size-40px {
  font-size: calc(100vw * 40 / 2560);
}

/deep/.ql-size-48px {
  font-size: calc(100vw * 48 / 2560);
}

/deep/.ql-size-60px {
  font-size: calc(100vw * 60 / 2560);
}

/deep/.ql-size-84px {
  font-size: calc(100vw * 84 / 2560);
}

/deep/.ql-size-100px {
  font-size: calc(100vw * 100 / 2560);
}

/deep/.ql-size-120px {
  font-size: calc(100vw * 120 / 2560);
}

/* 添加对齐方式样式类 */
/deep/.ql-align-center {
  text-align: center;
}

/deep/.ql-align-right {
  text-align: right;
}

/deep/.ql-align-left {
  text-align: left;
}

/deep/.ql-align-justify {
  text-align: justify;
}

/deep/table {
  // border-collapse: collapse;
  border: 1px solid #e6e6e6;
  width: 100%;
  margin: 10px 0;
  // background-color: #fff;

  td,
  th {
    min-width: 80px;
    height: 40px;
    border: 1px solid #e6e6e6;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
    // background-color: #fff;
  }

  th {
    background-color: rgba($color: #f7dfdf, $alpha: 0.2) !important;
    color: #fff;
    font-weight: bold;
  }

  tr:nth-child(odd) {
    background-color: rgba($color: #F7F7F7, $alpha: 0.1);
  }
}
</style>